<template>
  <div class="profile-content">
    <a-row class="user-info color-white" type="flex" :gutter="10" align="middle">
      <a-col :span="5" class="relative">
        <a-avatar style="backgroundColor:#eeeeee" :size="64" v-if="!USER_INFO" :icon="USER_INFO || 'user'"></a-avatar>
        <a-avatar style="backgroundColor:#eeeeee" :size="64" v-else-if="USER_INFO && (USER_INFO.avatar)" :src="USER_INFO.avatar"></a-avatar>
        <a-avatar style="backgroundColor:#1a4065" :size="64" v-else>{{USER_INFO.shop_name}}</a-avatar>
        <a-icon v-if="!!USER_INFO" type="edit" class="edit-icon" /> 
      </a-col>
      <template v-if="USER_INFO">
        <a-col :span="19">
          <p class="nick-name">{{USER_INFO.nickname}}<a-tag>{{USER_INFO.grade_name}}</a-tag></p>
          <p>{{USER_INFO.shop_name}}</p>
        </a-col>
      </template>
      <template v-else>
        <a-col style="font-size: 16px;" :span="18" @click="login">请登录 <a-icon type="right" /></a-col>
      </template>
    </a-row>

    <a-row class="profile-head-tool color-white" type="flex" align="middle" justify="space-around">
      <a-col flex="1" v-for="(item, index) in head_tools" :key="index" @click="jumpRoute(item.path)">

        <a-badge v-if="item.icon === 'message'" :count="unread_msg_num">
          <a-icon :type="item.icon"></a-icon>
        </a-badge>
        <a-icon v-else :type="item.icon"></a-icon>

        <p>{{item.name}}</p>
      </a-col>
    </a-row>

    <!-- 订单模块 -->
    <a-card class="tool-card" title="我的订单">
      <div slot="extra" class="extra" @click="jumpRoute('/order')">查看全部<a-icon type="right"></a-icon></div>
      <a-row type="flex" align="middle" justify="space-around">
        <a-col class="text-center" flex="1" v-for="(item, index) in order_tools" :key="index" @click="jumpRoute(item.path)">
          <a-badge :count="order_num ? order_num[item.icon] : ''">
            <a-icon :type="item.icon"></a-icon>
          </a-badge>
          <p>{{item.name}}</p>
        </a-col>
      </a-row>
    </a-card>

    <!-- 工具 -->
    <a-card class="tool-card" title="我的工具">
      <a-row type="flex" align="middle">
        <a-col class="text-center" flex="25%" v-for="(item, index) in body_tools" :key="index" @click="jumpRoute(item.path)">
          <a-icon :type="item.icon"></a-icon>
          <p>{{item.name}}</p>
        </a-col>
      </a-row>
    </a-card>

    <!-- 退出按钮 -->
    <a-button v-if="USER_INFO" class="layout-btn" block @click="layout">退出登录</a-button>
  </div>
</template>

<script>
import { 
  Avatar, 
  Row, 
  Col, 
  Icon, 
  Card, 
  Button, 
  Tag, 
  Badge 
} from 'ant-design-vue'
// 我的工具
const BODY_TOOLS = [{
  icon: 'red-envelope',
  name: '领券中心',
  path: '/shop'
},{
  icon: 'customer-service',
  name: '联系客服',
  path: '/shop'
},{
  icon: 'solution',
  name: '关于我们',
  path: '/shop'
}]
// 头部工具列表
const HEAD_TOOLS = [{
  icon: 'heart',
  name: '收藏',
  path: '/shop'
}, {
  icon: 'shopping',
  name: '足迹',
  path: '/shop'
}, {
  icon: 'message',
  name: '消息',
  path: '/shop'
}]
// 订单工具列表
const ORDER_TOOLS = [{
  icon: 'layout',
  name: '全部',
  path: '/order/1'
},{
  icon: 'wallet',
  name: '待支付',
  path: '/order/1'
},{
  icon: 'save',
  name: '待使用',
  path: '/order/1'
},{
  icon: 'book',
  name: '评价',
  path: '/order/1'
},{
  icon: 'switcher',
  name: '无效',
  path: '/order/1'
}]

import {mapState, mapGetters, mapMutations } from 'vuex'

export default {
  name: 'mine',
  data() {
    return {
      head_tools: HEAD_TOOLS,
      body_tools: BODY_TOOLS,
      order_tools: ORDER_TOOLS,
      unread_msg_num: 0,
      order_num: null
    }
  },
  components: {
    [Avatar.name]: Avatar,
    [Row.name]: Row,
    [Col.name]: Col,
    [Icon.name]: Icon,
    [Card.name]: Card,
    [Button.name]: Button,
    [Tag.name]: Tag,
    [Badge.name]: Badge
  },
  computed: {
    ...mapState(['USER_INFO', 'CITY']),
    ...mapGetters(['is_login'])
  },
  mounted() {
    if(this.USER_INFO){
      this.getProfileInfo();
    }
  },
  methods: {
    ...mapMutations(['set_userinfo']),
    login() {
      this.$router.push({
        path: '/login'
      })
    },
    getProfileInfo() {
      let userinfo = this.USER_INFO
      let params = {
        user_type: userinfo.user_type,
        uid: userinfo.uid,
        zone_code: this.CITY.zone_code
      }
      Promise.all([
        this.$api.getOrderNum({...params, order_from: userinfo.user_type}),
        this.$api.getUnreadMsgNum(params)
      ]).then(values => {
        const [order_num, msg_num] = values
        this.unread_msg_num = msg_num
        this.order_num = {
          layout: '',
          wallet: order_num.unpaidNum,
          save: order_num.paidNum,
          book: order_num.completedNum,
          switcher: ''
        }
      })
    },
    layout() {
      this.set_userinfo(null);
      this.login();
    },
    jumpRoute(path) {
      console.log(path)
    }
  }
}
</script>

<style lang="less" scoped>
@color-bule: #2470e0;
.profile-content {
  position: relative;
  padding: 30px 20px;
  overflow-x: hidden;
  min-height: 201px;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    right: -50%;
    z-index: -1;
    display: block;
    height: 200px;
    border-radius: 0 0 100% 100%;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(90deg, @color-bule, @color-bule);
  }
}
.edit-icon {
  position: absolute;
  bottom: 0;
  right: 10px;
  font-size: 16px;
  padding: 3px;
  background-color: #ff3c68;
  border-radius: 50%;
}
.nick-name {
  font-size: 18px;
  font-weight: bold;
  /deep/ .ant-tag  {
    background-image: linear-gradient(90deg, #ff3c68, #ff7940);
    padding: 1px 5px;
    height: 18px;
    line-height: 1;
    border-radius: 10px;
    color: #ffffff;
    border: none;
    margin-left: 10px;
    font-weight: normal;
    vertical-align: middle;
  }
}
.profile-head-tool {
  margin-top: 20px;
  font-size: 16px;
  text-align: center;
  .anticon {
    font-size: 26px;
  }
}
.tool-card {
  margin-top: 10px;
  border-radius: 5px;
  overflow: hidden;
  box-shadow: 0 0 6px 0 rgba(0,0,0,.25);
  .extra {
    color: @color-grey-6;
    .anticon {
      font-size: 14px;
      color: @color-grey-6;
    }
  }
  .anticon {
    font-size: 22px;
    color: @color-bule;
  }
}
.layout-btn {
  margin-top: 30px;
  border: 1px solid #e5e5e5;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-radius: 5px;
  color: @color-grey-9;
}
</style>